<!--
 * @Author: WangLong
 * @Date: 2024-03-06 18:18:36
 * @LastEditTime: 2024-04-22 16:18:24
 * @LastEditors: WangLong
 * @Description: 
 * @FilePath: \front_erp\src\views\index.vue
-->
<template>
  <div class="container">
    <div class="text-container">
      <div class="userInfo">
        <div class="userInfo-left">
          <el-image
            :src="personInfo.avatar"
            :preview-src-list="showImg(personInfo.avatar)"
            class="useinfImage"
          />
        </div>
        <div class="userInfo-right">
          <p class="userInfoName">{{ personInfo.nickName }}</p>
          <p class="userInfoGroup">{{ personInfo.fullDeptName }}</p>
          <!-- <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item>运维中心</el-breadcrumb-item>
            <el-breadcrumb-item>服务中台</el-breadcrumb-item>
            <el-breadcrumb-item>飞行组</el-breadcrumb-item>
          </el-breadcrumb> -->
          <p class="userInfoTime">{{ personInfo.loginDate }}</p>
        </div>
      </div>
      <div class="pictorialColor"></div>
    </div>
    <!-- 待办工作 -->
    <el-collapse v-model="activeNames">
      <!-- 基础信息 -->
      <el-collapse-item name="1">
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">待办工作</span>
        </template>
        <div class="collapseTbable">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="待处理" name="first" class="demoYabs">
              <div class="tabinfo">
                <!-- 表格数据 -->
                <el-table
                  v-loading="loading"
                  :data="projectContractList"
                  border
                  height="46vh"
                  :header-cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    label="标题"
                    prop="title"
                    :show-overflow-tooltip="true"
                    min-width="200"
                  />
                  <el-table-column
                    label="摘要"
                    prop="digest"
                    :show-overflow-tooltip="true"
                    min-width="240"
                  />
                  <el-table-column
                    label="发起人"
                    prop="initiator"
                    :show-overflow-tooltip="true"
                    min-width="80"
                  />
                  <el-table-column
                    label="发起部门"
                    prop="deptName"
                    :show-overflow-tooltip="true"
                    min-width="130"
                  >
                  </el-table-column>

                  <el-table-column
                    label="创建时间"
                    prop="createTime"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  />
                  <el-table-column
                    label="流程状态"
                    prop="checkStatus"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  >
                    <template #default="{ row }">
                      <span :style="getStatusColor(row.checkStatus)">{{
                        row.checkStatus
                      }}</span>
                    </template></el-table-column
                  >
                  <el-table-column label="操作" width="60px">
                    <template #default="{ row }">
                      <div class="table-operate">
                        <el-icon
                          title="详情"
                          color="#007CEF"
                          class="table-icon"
                          :size="20"
                          @click="handleOperate(row)"
                        >
                          <Document />
                        </el-icon>
                      </div> </template
                  ></el-table-column>
                </el-table>

                <!-- 分页 -->
                <pagination
                  class="pagination"
                  :total="total"
                  v-model:page="params.pageNum"
                  v-model:limit="params.pageSize"
                  @pagination="getList"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="已处理" name="second">
              <div class="tabinfo">
                <!-- 表格数据 -->
                <el-table
                  v-loading="loading"
                  :data="projectContractList"
                  border
                  height="46vh"
                  :header-cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    label="标题"
                    prop="title"
                    :show-overflow-tooltip="true"
                    min-width="200"
                  />
                  <el-table-column
                    label="摘要"
                    prop="digest"
                    :show-overflow-tooltip="true"
                    min-width="240"
                  />
                  <el-table-column
                    label="发起人"
                    prop="initiator"
                    :show-overflow-tooltip="true"
                    min-width="80"
                  />
                  <el-table-column
                    label="发起部门"
                    prop="deptName"
                    :show-overflow-tooltip="true"
                    min-width="130"
                  >
                  </el-table-column>

                  <el-table-column
                    label="申请/创建时间"
                    prop="createTime"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  />
                  <el-table-column
                    label="流程状态"
                    prop="checkStatus"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  >
                    <template #default="{ row }">
                      <span :style="getStatusColor(row.checkStatus)">{{
                        row.checkStatus
                      }}</span>
                    </template></el-table-column
                  >
                  <el-table-column label="操作" width="60px">
                    <template #default="{ row }">
                      <div class="table-operate">
                        <el-icon
                          title="详情"
                          color="#007CEF"
                          class="table-icon"
                          :size="20"
                          @click="handleOperate(row)"
                        >
                          <Document />
                        </el-icon>
                      </div> </template
                  ></el-table-column>
                </el-table>

                <!-- 分页 -->
                <pagination
                  class="pagination"
                  :total="total"
                  v-model:page="params.pageNum"
                  v-model:limit="params.pageSize"
                  @pagination="getList"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="已发起" name="three">
              <div class="tabinfo">
                <!-- 表格数据 -->
                <el-table
                  v-loading="loading"
                  :data="projectContractList"
                  border
                  height="46vh"
                  :header-cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    label="标题"
                    prop="title"
                    :show-overflow-tooltip="true"
                    min-width="200"
                  />
                  <el-table-column
                    label="摘要"
                    prop="digest"
                    :show-overflow-tooltip="true"
                    min-width="240"
                  />
                  <el-table-column
                    label="发起人"
                    prop="initiator"
                    :show-overflow-tooltip="true"
                    min-width="80"
                  />
                  <el-table-column
                    label="发起部门"
                    prop="deptName"
                    :show-overflow-tooltip="true"
                    min-width="130"
                  >
                  </el-table-column>

                  <el-table-column
                    label="申请/创建时间"
                    prop="createTime"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  />
                  <el-table-column
                    label="流程状态"
                    prop="checkStatus"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  >
                    <template #default="{ row }">
                      <span :style="getStatusColor(row.checkStatus)">{{
                        row.checkStatus
                      }}</span>
                    </template></el-table-column
                  >
                  <el-table-column label="操作" width="60px">
                    <template #default="{ row }">
                      <div class="table-operate">
                        <el-icon
                          title="详情"
                          color="#007CEF"
                          class="table-icon"
                          :size="20"
                          @click="handleOperate(row)"
                        >
                          <Document />
                        </el-icon>
                      </div> </template
                  ></el-table-column>
                </el-table>

                <!-- 分页 -->
                <pagination
                  class="pagination"
                  :total="total"
                  v-model:page="params.pageNum"
                  v-model:limit="params.pageSize"
                  @pagination="getList"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="收到的" name="four">
              <div class="tabinfo">
                <!-- 表格数据 -->
                <el-table
                  v-loading="loading"
                  :data="projectContractList"
                  border
                  height="46vh"
                  :header-cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    label="标题"
                    prop="title"
                    :show-overflow-tooltip="true"
                    min-width="200"
                  />
                  <el-table-column
                    label="摘要"
                    prop="digest"
                    :show-overflow-tooltip="true"
                    min-width="240"
                  />
                  <el-table-column
                    label="发起人"
                    prop="initiator"
                    :show-overflow-tooltip="true"
                    min-width="80"
                  />
                  <el-table-column
                    label="发起部门"
                    prop="deptName"
                    :show-overflow-tooltip="true"
                    min-width="130"
                  >
                  </el-table-column>

                  <el-table-column
                    label="申请/创建时间"
                    prop="createTime"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  />
                  <el-table-column
                    label="流程状态"
                    prop="checkStatus"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  >
                    <template #default="{ row }">
                      <span :style="getStatusColor(row.checkStatus)">{{
                        row.checkStatus
                      }}</span>
                    </template></el-table-column
                  >
                  <el-table-column label="操作" width="60px">
                    <template #default="{ row }">
                      <div class="table-operate">
                        <el-icon
                          title="详情"
                          color="#007CEF"
                          class="table-icon"
                          :size="20"
                          @click="handleOperate(row)"
                        >
                          <Document />
                        </el-icon>
                      </div> </template
                  ></el-table-column>
                </el-table>

                <!-- 分页 -->
                <pagination
                  class="pagination"
                  :total="total"
                  v-model:page="params.pageNum"
                  v-model:limit="params.pageSize"
                  @pagination="getList"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-collapse-item>
    </el-collapse>
   
  </div>
  <ProjectCheck
      v-if="projectCheckShow"
      ref="projectCheckRef"
      v-model:projectAddShow="projectCheckShow"
      @refreshList="getList"
      pageType="check"
    />
    <ProjectRequireCheck
      v-if="projectRequireCheckShow"
      ref="projectRequireCheckRef"
      v-model:requirementsCheckShow="projectRequireCheckShow"
      @refreshList="getList"
      pageType="check"
    />
</template>

<script setup>
import ProjectCheck from "./sales/project/projectCheck"
import ProjectRequireCheck from "./sales/projectRequirements/proRequirementsCheck.vue"
import { ref, onMounted } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { getHomePageList, getUserHomePage } from "@/api/home";
const router = useRouter();

// 项目审核
const projectCheckShow = ref(false);
// 项目需求审核
const projectRequireCheckShow = ref(false);
// 项目审核组件引用
const projectCheckRef = ref(null);
// 项目需求审核引用
const projectRequireCheckRef = ref(null);
// 折叠栏默认展开
const activeNames = ref(["1"]);
const activeName = ref("first");
// 列表总数
const total = ref(0);
// 表格加载效果
const loading = ref(false);
//个人信息数据
const personInfo = ref({});
//列表数据
const projectContractList = ref([]);
const showImg = (img) => {
  let imgArr = [];
  imgArr.push(img);
  return imgArr;
};
// 搜索参数
const originalParams = {
  pageNum: 1,
  pageSize: 50,
  type: 0,
};
// 将初始数据转化为响应式对象
const params = reactive({ ...originalParams });
watch(activeName, (newValue, oldValue) => {
  // 监听tab变化时将筛选条件数据恢复至原始数据
  Object.keys(originalParams).forEach((key) => {
    params[key] = originalParams[key];
  });
  if (newValue === "first") {
    params.type = 0;
    getList();
  } else if (newValue === "second") {
    params.type = 1;
    getList();
  } else  if (newValue === "three") {
    params.type = 2;
    getList();
  }else {
    params.type = 3;
    getList();
  }
});
/**
 * @description: 获取库存列表
 */
const getList = async () => {
  try {
    loading.value = true;
    let { pageNum, pageSize } = params;
    const res = await getHomePageList({ pageNum, pageSize }, params);
    projectContractList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
/**
 * @description: 获取个人信息
 */
const userHomePage = async () => {
  const res = await getUserHomePage();
  personInfo.value = res;
};
/**
 * @description: 跳转到详细列表
 */
const handleOperate = async (row) => {
  console.log("跳转数据", row); //businessId
  if (row.tableName === "erp_warehouse_apply") {
    //入库单审核流程
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/stock/inorderAudit`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/stock/inorderAudit`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_delivery_apply") {
    //出库单审核流程
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/stock/outorderAudit`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/stock/outorderAudit`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_stock_return_apply") {
    //退库单审核流程
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/stock/returnReview`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/stock/returnReview`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_contract") {
    //销售合同审核流程
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/SealManage/contract`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/SealManage/contract`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_purchase_apply") {
    //请购管理
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/purchase/requestCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/purchase/requestCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_purchase_contract") {
    //项目采购合同(协议采购、小额垫付)
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/purchase/sealCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/purchase/sealCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_purchase_inquiry") {
    //采购-询比价
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/purchase/inquiryCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/purchase/inquiryCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_purchase_order_info") {
    //采购-采购订单
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/purchase/orderCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/purchase/orderCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_payment_apply") {
    //采购-付款申请
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/finace/paymentCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/finace/paymentCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if(row.tableName === "erp_project_requirement") {
    projectRequireCheckShow.value = true;
      nextTick(() => {
        
        if(activeName.value == 'second' ||activeName.value == 'three' || activeName.value == 'four' ) {
          projectRequireCheckRef.value.handleDetailInfo(row.businessId,true,row.flowUuid);
          }else {
            projectRequireCheckRef.value.handleDetailInfo(row.businessId,false,row.flowUuid);
          }
      });

  }else if (row.tableName === "erp_project") {  
    // 项目跟进
    if(row.homeType) {
      const { href } = router.resolve({
        path: `/sales/marketingProjects`,
        query: { projectId: row.businessId },
      });
      window.open(href, "_blank");
    }else {
      //项目信息
      if (row.type === 15) {
        // const { href } = router.resolve({
        //   path: `/sales/projectCheck`,
        //   query: { businessId: row.businessId, checkStatus: row.checkStatus },
        // });
        // window.open(href, "_blank");
        projectCheckShow.value = true;
        nextTick(() => {
          if(activeName.value == 'second' ||activeName.value == 'three' || activeName.value == 'four' ) {
            projectCheckRef.value.handleDetailInfo(row.businessId,1,true,row.flowUuid);
          }else {
            projectCheckRef.value.handleDetailInfo(row.businessId,1,false,row.flowUuid);
          }
        });
      } else {
        // const { href } = router.resolve({
        //   path: `/sales/projectCheck`,
        //   query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
        // });
        // window.open(href, "_blank");
        projectCheckShow.value = true;
        nextTick(() => {
          if(activeName.value == 'second' ||activeName.value == 'three' || activeName.value == 'four') {
            projectCheckRef.value.handleDetailInfo(row.businessId,2,true,row.flowUuid);
          }else {
            projectCheckRef.value.handleDetailInfo(row.businessId,2,false,row.flowUuid);
          }
        });
        
      }
    }
  } else if (row.tableName === "erp_maintenance_order_apply") {
    //工单审核
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/operation/workCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/operation/workCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_synthesis_intellectual_property") {
    //知识产权
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/serve/propertyCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/serve/propertyCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  } else if (row.tableName === "erp_synthesis_contract") {
    //综合服务-综合采购补充协议
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/serve/serveContractCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/serve/serveContractCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  }else if (row.tableName === "erp_maintance_product_access") {
    //产品评估
    if (row.msgType === "待处理") {
      const { href } = router.resolve({
        path: `/operation/productEstimateCheck`,
        query: { businessId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    } else {
      const { href } = router.resolve({
        path: `/operation/productEstimateCheck`,
        query: { myinfoId: row.businessId, checkStatus: row.checkStatus },
      });
      window.open(href, "_blank");
    }
  }

};
onMounted(() => {
  userHomePage();
  getList();
});
</script>

<style scoped lang="scss">
.container {
  width: calc(100% - 34px);
  height: 82vh;
  margin: 0 20px;
  .text-container {
    width: 100%;
    height: 160px;
    margin: 0px 0px 20px 0px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    .userInfo {
      width: 30%;
      height: 98%;
      background: #ffffff;
      margin-left: 3px;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .userInfo-left {
        width: 30%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .useinfImage {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }
      .userInfo-right {
        width: 60%;
        height: 84%;
        .userInfoName {
          font-size: 18px;
        }
        .userInfoGroup {
          font-size: 14px;
          color: #000000;
        }
        .userInfoTime {
          font-size: 12px;
          color: #666666;
        }
      }
    }
    .pictorialColor {
      width: 68%;
      height: 100%;
      background: url("@/assets/images/podxed.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .collapseTbable {
    width: 100%;
    padding: 10px 10px 0px 10px;
    height: 58vh;
  }
  :deep(.el-tabs) {
    height: 100% !important;
  }
  :deep(.el-tabs__content) {
    height: 100% !important;
  }
  :deep(.el-tabs__item) {
    padding: 0 36px;
  }
  .pagination-container {
    margin: -6px;
  }
}
</style>
